Вывести внизу окна браузера посетителя форму для подписки. По умолчанию панель должна быть спрятана, если пользователь зашел на сайт первый раз, через n-секунд панель должна плавно выехать внизу сайта. Когда панель неактивна, пользователь должен иметь возможность ее открыть.
Разметка очень простая: #bottomPanel - это элемент, который мы будем позиционировать на странице; #bottomPanelConteiner - контейнер для всех внутренних элементов, они будут позиционироваться относительно него, контенер содержит саму форму, кнопку "закрыть" и логотип.
После #bottomPanel помещаем картинку, она будет служить кнопкой для открывания напели.
Как мы уже договорились в шаге 1, #bottomPanel нам нужно спозиционировать на странице, также сразу опишем стиль для контейнера:
#bottomPanel
{
height: 90px; width: 100%;
position: fixed;
bottom: 0;
left:0;
font-family: Arial;
}
#bottomPanelConteiner
{
height:60px;
border: solid 1px #ccc;
margin-top: 30px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
box-shadow: 0 0 3px #999;
position: relative; /* Относительно этого элемента мы будем позиционировать внутренние */
}
Здесь все просто, отдельно сказать хочется про свойства background в bottomPanelConteiner - эти свойства задают градиентную заливку для всех браузеров (вместо того, чтобы подгружать фоновую картинку). Этот код легко сгенерировать с помощью сервиса colorzilla
Теперь расположим логотип, кнопку "закрыть" и форму, позиционируя их абсолютно (относительно bottomPanelConteiner):
#bottomPanelLogo
{
position: absolute;
top:-30px; /* делаем логотип выступающим за панель */
left:20px;
}
#bottomPanel .close
{
position: absolute;
top:10px; right: 10px;
background: url(images/close.png) no-repeat;
height: 16px; width: 16px;
display: inline-block; cursor: pointer;
}
#bottomPanelConteiner form
{
position: absolute;
left:200px; top:12px;
font-size: 12px;
padding: 0;
}
Мы специально, заведомо сделали #bottomPanel на 30px больше, чем сам контейнер #bottomPanelConteiner, это теперь нам позволило расположить логотип так, как-будто он выходит за пределы панели.
На этом этапе у нас должен получиться примерно такой вид:
Сама форма:
#bottomPanelConteiner form input:-webkit-autofill{
color: #666 !important;
background: none !important; /* убираем дефолтные стили для Хрома и Сафари */
}
#bottomPanelConteiner form input
{
width: 200px;
height: 22px;
padding: 3px 5px;
display: inline;
vertical-align: middle;
border: solid 1px #2794cd;
border-radius:3px;
margin-right: 5px;
}
#bottomPanelConteiner form input:focus
{
box-shadow:0 0 5px #2794cd;
outline: none;
}
#bottomPanelConteiner form button
{
height: 30px;
padding: 0 10px;
cursor: pointer;
color: #fff; font-weight: 700;
vertical-align: middle;
border: solid 1px #4db8f0;
border-radius:3px;
background: #4db8f0; /* Old browsers */
background: -moz-linear-gradient(top, #4db8f0 0%, #0958a7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4db8f0), color-stop(100%,#0958a7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4db8f0', endColorstr='#0958a7',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* W3C */
}
#bottomPanelConteiner form button:hover
{
box-shadow:0 0 5px #2794cd;
}
#bottomPanelConteiner form .title
{
text-transform: uppercase;
display: inline-block;
margin-right: 20px;
font-size: 16px;
color: #333;
font-weight: 700;
vertical-align: middle;
}
#bottomPanelConteiner form .title span
{
color: #990000;
}
В отдельном фале css для IE7-8 правим стиль для инпута:
#bottomPanelConteiner form input
{
padding-top: 6px; padding-bottom: 0;
}
И этот файл не забываем подключить между тегами head:
Теперь у нас панель имеет законченный внешний вид и ее можно спрятать (согласно условию задачи), для этого в #bottomPanel меняем свойство bottom с 0 на -90px:
#bottomPanel
{
height: 90px; width: 100%;
position: fixed;
bottom: -90px;
left:0;
font-family: Arial;
}
И, когда панель скрыта, нам нужно расположить картинку-кнопку #showBottomPanel, которая будет эту панель раскрывать:
#showBottomPanel
{
position: fixed;
bottom: 0;
right: 100px;
cursor: pointer;
}
Теперь панель скрыта, мы видим кнопку, пора переходить к js-части:
Для реализации этой части нам понадобятся jquery и плагин jquery.cookie, также создадим новый js-файл и подключим все это м/у тегами head:
Вероятно в первом шаге в разметке Вы заметили у инпута атрибут placeholder - он устанавливает дефолтный текст для инпута. Так как IE до 10 версии не понимают этот атрибут, дополнительно для инпута присваиваем class placeholder, по которому для недобраузеров скрипт placeholder.js эмулирует работу этого атрибута.
В bottom-panel.js пишем функцию, которая будет скрывать картинку-кнопку и открывать панель:
function showBottomPanel()
{
$('#showBottomPanel').animate({'bottom':'-48'}, 500, function(){
$('#bottomPanel').animate({'bottom':'0'}, 500);
$.cookie('bottomPanelHide', 1);
})
Здесь мы у showBottomPanel анимировано меняем позицию до -48px (прячем, 48px - высота картинки-кнопки). Скорость устанавливаем на 500мс, а после завершения запускаем функцию, которая у bottomPanel плавно установит позицию bottom до 0 (панель "заедет в видимую область экрана") и установит куку bottomPanelHide, которая будет в дальнейшем нам о том, что пользователь нашу форму уже видел
Эту функцию нужно будет вызывать нам в 2 случаях - показывать новому пользователю и открывать по клику на картинке-кнопке:
/* Открывать по клику на картинке-кнопке */
$('#showBottomPanel').click(function(){
showBottomPanel();
})
/* Открывать по таймАуту */
if(!$.cookie('bottomPanelHide'))
{
setTimeout(showBottomPanel, 3000);
}
Здесь мы дополнительно прописали условие, если нет куки с именем bottomPanelHide (новый пользователь, еще не видел нашу панельку с формой), то только тогда устанавливаем таймаут на 3000 мс
Теперь для кнопки "закрыть" пишем :
$('#bottomPanel .close').click(function(){
$('#bottomPanel').animate({'bottom':'-90'}, 500, function(){
$('#showBottomPanel').animate({'bottom':'0'})
})
});
Полный код будет выглядеть так:
$(function (){
$('#showBottomPanel').click(function(){
showBottomPanel();
})
if(!$.cookie('bottomPanelHide'))
{
setTimeout(showBottomPanel, 3000);
}
$('#bottomPanel .close').click(function(){
$('#bottomPanel').animate({'bottom':'-90'}, 500, function(){
$('#showBottomPanel').animate({'bottom':'0'})
})
});
if(!$.cookie('bottomPanelHide'))
{
setTimeout(showBottomPanel, 3000);
}
function showBottomPanel()
{
$('#showBottomPanel').animate({'bottom':'-48'}, 500, function(){
$('#bottomPanel').animate({'bottom':'0'}, 500);
$.cookie('bottomPanelHide', 1);
})
}
});